<template>
  <MainDetails/>
  <BgLine/>
  <BackGround>
    <div class="_main">
      <div class="_main_name">—— {{$t("tab.dig")}} ——</div>
      <div class="_main_1">
        <div class="_main_1_title">{{$t("dig.netPower")}}{{moneyData.totalPower}}</div>
        <div class="_main_1_2">
          <div class="_main_1_title">{{$t("dig.myPower")}}{{moneyData.myPower}}</div>
          <div class="_main_1_title">{{$t("dig.cardOrSlot")}}{{data.fillSize}}/{{data.size}}</div>
        </div>
        <div class="_main_1_3">
          <div class="_main_1_3_l">
            <div>{{data.initPower}}</div>
            <div>{{$t("dig.init")}}</div>
            <div>{{data.unionPower}}</div>
            <div>{{$t("dig.union")}}</div>
          </div>
          <div class="_main_1_3_l">
            <div>{{data.levelPower}}</div>
            <div>{{$t("dig.level")}}</div>
            <div>{{data.teamPower}}</div>
            <div>{{$t("dig.team")}}</div>
          </div>
          <div class="_main_1_3_l">
            <div>{{data.historyPower}}</div>
            <div>{{$t("dig.history")}}</div>
            <div>{{data.dynamicPower}}</div>
            <div>{{$t("dig.spread")}}</div>
          </div>
        </div>

      </div>
      <div class="_main_2">
        <div v-for="({currentPower, heroId, userHero, src, id}) in list" :key="id">
          <div v-if="heroId !== null">
            <img :src="modules['/src/assets/Hero/' + userHero.color+'.png'].default" alt="" class="bg"/>
            <img :src="src" alt="">
            <div class="_img_name">{{userHero.heroName}}</div>
            <div class="_img_remove" @click="() => leaveSlot(id)"><img src="@/assets/rechargemoney/icon_cancel.png"/></div>
            <div class="_img_level">{{$t("starBegin")}}{{userHero.level}}{{$t("star")}}</div>
            <div class="_img_zl">{{$t("power")}}{{currentPower}}</div>
          </div>
          <div v-if="heroId === null">
            <div class="_main_3">
              <img src="@/assets/TruckMining/bg_xn.png" alt="" />
              <div class="_main_3_btn" @click="()=> put(id)">{{$t("dig.put")}}</div>
            </div>
          </div>
        </div>
        <div @click="add" v-show="list.length < 60">
          <div class="_main_4"></div>
        </div>
      </div>


    </div>
  </BackGround>
</template>

<script>
    import MainDetails from "@components/MainDetails/index.vue";
    import BackGround from "@components/BackGround1/index.vue";
    import BgLine from '@components/BgLine/index.vue';
    import http from "../../http";
    import {Dialog} from 'vant';
    const modules = import.meta.globEager("/src/assets/Hero/**");
    console.log(modules)
    export default {
      data(){
        return {
          modules: modules,
          list: [],
          data: {},
          moneyData: {}
        }
      },
      methods: {
        put: function(id){
          this.$router.push("/SelectCard?slot=" + id);
        },
        getMoney: async function(){
          let res = await http.get(`/api/wallet/moneyAndData`);
          if (res.code === 200) {
            this.moneyData = res.data;
          }
        },
        listSlot: async function(){
          let res = await http.get(`/api/user-card-slot/listMySlot`);
          if (res.code === 200) {
            res.data.forEach((item) => {
              if(item.heroId){
                console.log(modules, '/src/assets/Hero/' + item.userHero.color + "/" + item.userHero.hero +'.png')
                item.src = modules['/src/assets/Hero/' + item.userHero.color + "/" + item.userHero.hero +'.png'].default;
              }
            });
            this.list = res.data;
          }
        },
        leaveSlot: async function(id){
          Dialog.confirm({
            title: this.$t("dig.removeTitle"),
            cancelButtonText: this.$t("cancel"),
            confirmButtonText: this.$t("confirm"),
            message: this.$t("dig.removeContent"),
          }).then(async () => {
              let res = await http.post(`/api/user-card-slot/leaveSlot?id=` + id, true);
              if (res.code === 200) {
                this.$router.replace("/TruckMining?t=" + new Date().getTime())
              }
          }).catch(() => {});
        },
        getData: async function(){
          let res = await http.get(`/api/user-card-slot/getMyData`);
          if (res.code === 200) {
            this.data = res.data;
          }
        },
        add: function(){
          this.$store.commit('changeOverlayName',{name: 'AddCard', params: {}})
        },
        init: function(){
          this.listSlot();
          this.getMoney();
          this.getData();
        }
      },
      mounted() {
        this.init();
      },
      watch: {
        '$route' (to,from){
          if(to.path === "/TruckMining" && from.path === "/TruckMining"){
            this.init();
          }
        }
      },
      components: {
        BackGround,
        MainDetails,
        BgLine,
      }
    }
</script>

<style scoped lang="scss">
  ._main {
    padding: 18px 15px 29px;
  }

  ._main_name {
    font-size: 18px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color3;
    line-height: 25px;
  }
  ._main_1 {
    height: 233px;
    width: 345px;
    margin-top: 19px;
    padding: 12px;
    background: url("@/assets/TruckMining/bg_m.png") no-repeat center;
    background-size: cover;
  }
  ._main_1_title {
    font-size: 14px;
    @include fontTCRegular;
    font-weight: 400;
    color: #E5CFB7;
    text-align: left;
  }
  ._main_1_2 {
    @include flex;
    margin-top: 15px;
  }
  ._main_1_3 {
    @include flex;
    margin-top: 24px;
  }
  ._main_1_3_l {
    div {
      font-size: 15px;
      @include fontTCRegular;
      font-weight: 400;
      color: #E5CFB7;
      height: 21px;
      margin-bottom: 15px;
      &:nth-child(2n) {
        font-size: 14px;
        height: 20px;
      }
    }
  }
  ._main_2 {
    width: 100%;
    margin-top:25px;
    font-size: 0;
    @include flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    ._img_remove {
      position: absolute;
      font-size: 9px;
      @include fontSCRegular;
      font-weight: 400;
      color: #FFFFFF;
      width: 30px;
      height: 30px;
      line-height: 16px;
      background: rgba(0, 0, 0, .79);
      border-radius: 8px;
      top: 60px;
      right: 36px;
      z-index: 101;
      justify-content: center;
      align-items: center;
      display: flex;
      img {
        width:10px;
        height: 10px;
      }
    }


    > div {
      position: relative;
      width: 103px;
      height: 196px;
      margin-left: 18px;
      &:nth-child(3n+1){
        margin-left: 0
      }
      img {
        height: 150px;
        width: 103px;
        &.bg{
          position: absolute;
          width:103px;
          height:150px;
          top:0;
          left: 0;
          z-index: 100;
        }
      }
    }
  }

  ._img_name {
    width: 64px;
    height: 26px;
    border-radius: 3px;
    border: 1px solid $color3;
    font-size: 12px;
    @include fontSCRegular;
    color: $color3;
    line-height: 26px;
    margin: 10px auto;
  }

  ._img_level {
    position: absolute;
    font-size: 9px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFFFFF;
    width: 36px;
    height: 20px;
    line-height: 20px;
    background: rgba(0, 0, 0, .79);
    border-radius: 8px;
    top: 10px;
    right: 10px;
  }
  ._img_zl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFB522;
    width: 67px;
    height: 25px;
    background: rgba(0, 0, 0, .79);
    border-radius: 8px;
    line-height: 25px;
    top: 115px;
    white-space: nowrap;
  }
  ._main_b {
    display: flex;
    align-items: center;
  }
  ._main_3 {
    width: 103px;
    height: 150px;
    background-size: cover;
    position: relative;
    ._main_3_btn {
      font-size: 12px;
      @include fontTCRegular;
      font-weight: 400;
      color: #FFFFFF;
      width: 70px;
      height: 27px;
      background: $color;
      border-radius: 3px;
      line-height: 27px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  ._main_4 {
    height: 150px;
    background: url("@/assets/TruckMining/icon_add.png") no-repeat center;
    background-size: 30% 20%;
    justify-content: center;
    align-items: center;
  }
</style>
